<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="news-title">最新资讯</view>
      <view class="nav-divider"></view>
    </view>
    
    <!-- 新闻列表 -->
    <view class="news-list">
      <view class="news-item" v-for="(item, index) in dataList" :key="index">
        <!-- 新闻卡片容器（带高级纹理） -->
        <view class="news-card" :class="{ 'news-card--top': item.isTop }">
          <!-- 卡片纹理叠加 -->
          <view class="card-texture"></view>
          
          <!-- 标题区域 -->
          <view class="title-container">
            <!-- 置顶标签（高级渐变+动效） -->
            <view class="top-tag" v-if="item.isTop">
              <text class="tag-icon">📌</text>
              置顶
            </view>
            <!-- 新闻标题（渐变文字+hover动效） -->
            <view class="news-card__title" @click="goDetail(item.title)">
              {{ item.title }}
            </view>
          </view>
          
          <!-- 新闻元信息（图标+精致排版） -->
          <view class="news-card__meta">
            <view class="meta__left">
              <view class="meta__author" @click="showAuthor(item.author)">
                <text class="meta-icon">👤</text>
                {{ item.author }}
              </view>
              <view class="meta__separator"></view>
              <view class="meta__comments">
                <text class="meta-icon">💬</text>
                {{ formatComments(item.comments) }}
              </view>
            </view>
            <view class="meta__time">
              <text class="meta-icon">⏱️</text>
              {{ item.time }}
            </view>
          </view>
          
          <!-- 搜索插槽（高级悬浮+渐变） -->
          <template v-if="item.showSearch">
            <view class="search-slot">
              <text class="search-slot__label">相关搜索：</text>
              <view class="search-slot__tags">
                <view class="search-tag" @click="handleSearch('今日金价')">
                  <text class="tag-icon--small">🔍</text>
                  今日金价
                </view>
                <view class="search-tag" @click="handleSearch('精选好物')">
                  <text class="tag-icon--small">🔍</text>
                  精选好物
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    
    <!-- 底部装饰元素 -->
    <view class="page-footer"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          title: "乘势而上，续写中国奇迹新篇章—党的二十届四中全会侧记",
          isTop: true,
          author: "新华社",
          comments: 56,
          time: "2025.10.25"
        },
        {
          title: "黄金还能走多远?卖方高呼“第三浪启动”，230多份研报看多",
          isTop: false,
          author: "财联社",
          comments: "452",
          time: "2025.10.08",
          showSearch: true
        },
        {
          title: "14个月从0家开到100家门店，蜜雪冰城如何做到",
          isTop: false,
          author: "央视新闻",
          comments: 102,
          time: "2025.10.20"
        },
        {
          title: "视频画报｜携手开创亚太发展新时代",
          isTop: false,
          author: "新华社",
          comments: "91.1万",
          time: "2025.10.29"
        },
        {
          title: "年轻人关心的这些事，“十五五”规划建议都提到了",
          isTop: false,
          author: "人民日报客户端",
          comments: "223万",
          time: "2025.10.29"
        },
        {
          title: "【理响中国】解码中华文明 | 从未停更的大地史书——中华文明具有突出的连续性",
          isTop: false,
          author: "中国人民网",
          comments: "110万",
          time: "2025.10.29"
        },
        {
          title: "喜欢您来！福建美味“不基础”",
          isTop: false,
          author: "福州日报",
          comments: 9999,
          time: "2025.10.29"
        },
        {
          title: "“双节”假期福建礼物市集人气旺 市民游客赶集看好戏",
          isTop: false,
          author: "东南网",
          comments: "135万",
          time: "2025.10.29"
        },
        {
          title: "福建隐藏的“吃货天堂”，弓鱼术竟成为鱼鲜秘诀？",
          isTop: false,
          author: "福州日报",
          comments: "520万",
          time: "2025.10.29"
        },
      ]
    }
  },
  methods: {
    goDetail(title) {
      // 高级 Toast 动画效果
      uni.createAnimation({
        duration: 300,
        timingFunction: "ease-out"
      }).opacity(0).translateY(-20).step();
      
      uni.showToast({
        title: `点击标题：${title}，跳转详情页`,
        icon: "none",
        duration: 1500,
        animation: true
      });
    },
    showAuthor(author) {
      uni.showModal({
        title: "作者信息",
        content: `作者：${author}`,
        confirmText: "查看更多",
        cancelText: "关闭",
        confirmColor: "#4361ee",
        cancelColor: "#718096",
        animationType: "slide-in-bottom",
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: `正在加载${author}的更多信息`,
              icon: "loading",
              duration: 1000
            });
          }
        }
      });
    },
    handleSearch(keyword) {
      // 搜索按钮点击动画反馈
      uni.showToast({
        title: `正在搜索：${keyword}`,
        icon: "none",
        duration: 1200
      });
    },
    // 评论数格式化（万级显示）
    formatComments(comments) {
      if (typeof comments === 'string') comments = parseFloat(comments);
      return comments >= 10000 ? (comments / 10000).toFixed(1) + '万' : comments;
    }
  }
}
</script>

<style scoped>
/* 基础布局与高级渐变背景 */
.page-container {
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%);
  min-height: 100vh;
  padding-bottom: 40rpx;
  position: relative;
  overflow-x: hidden;
}

/* 页面背景纹理（高级细节） */
.page-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(67, 97, 238, 0.03) 1px, transparent 1px);
  background-size: 20rpx 20rpx;
  pointer-events: none;
  z-index: 0;
}

/* 顶部导航栏-顶级质感 */
.top-nav {
  background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);
  padding: 32rpx 24rpx;
  border-radius: 0 0 36rpx 36rpx;
  box-shadow: 0 12rpx 36rpx rgba(67, 97, 238, 0.18);
  margin-bottom: 36rpx;
  position: relative;
  overflow: hidden;
}

/* 导航栏渐变叠加 */
.top-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
}

.news-title {
  font-size: 44rpx;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  letter-spacing: 3rpx;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

/* 导航栏分隔线（精致细节） */
.nav-divider {
  width: 120rpx;
  height: 6rpx;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  margin: 16rpx auto 0;
  border-radius: 3rpx;
  opacity: 0.8;
}

/* 新闻列表布局 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 0 24rpx;
  position: relative;
  z-index: 1;
}

/* 新闻卡片-顶级质感设计 */
.news-card {
  background: #ffffff;
  border-radius: 28rpx;
  padding: 32rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.04);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
}

/* 置顶卡片特殊样式 */
.news-card--top {
  border: 1rpx solid rgba(229, 62, 62, 0.1);
}

/* 卡片悬浮终极效果 */
.news-card:hover {
  transform: translateY(-8rpx) scale(1.005);
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.07);
}

/* 卡片顶部渐变装饰（高级版） */
.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rpx;
  background: linear-gradient(90deg, #4361ee, #4895ef, #3f37c9);
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
}

/* 置顶卡片渐变 */
.news-card--top::before {
  background: linear-gradient(90deg, #e53e3e, #f97316, #e53e3e);
  background-size: 200% 100%;
  animation: gradientShift 2s ease infinite;
}

/* 卡片纹理叠加（高级质感） */
.card-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(0, 0, 0, 0.01) 1px, transparent 1px);
  background-size: 30rpx 30rpx;
  pointer-events: none;
  opacity: 0.7;
}

/* 标题容器 */
.title-container {
  display: flex;
  align-items: flex-start;
  gap: 14rpx;
  margin-bottom: 24rpx;
  position: relative;
}

/* 置顶标签-终极高级样式 */
.top-tag {
  background: linear-gradient(90deg, #e53e3e, #c53030);
  color: #ffffff;
  font-size: 20rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
  box-shadow: 0 6rpx 12rpx rgba(229, 62, 62, 0.25);
  margin-top: 6rpx;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6rpx;
  transform: translateZ(0);
  transition: all 0.3s ease;
}

.news-card:hover .top-tag {
  transform: scale(1.05);
  box-shadow: 0 8rpx 16rpx rgba(229, 62, 62, 0.3);
}

.tag-icon {
  font-size: 22rpx;
}

/* 新闻标题-渐变文字+精致排版 */
.news-card__title {
  font-size: 34rpx;
  font-weight: 600;
  color: #1a202c;
  line-height: 1.6;
  transition: all 0.4s ease;
  cursor: pointer;
  flex: 1;
  background: linear-gradient(90deg, #1a202c, #2d3748);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.02);
}

.news-card:hover .news-card__title {
  background: linear-gradient(90deg, #4361ee, #3a0ca3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 元信息区域-顶级精致 */
.news-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  color: #718096;
  margin-bottom: 20rpx;
  gap: 16rpx;
}

.meta__left {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex-wrap: wrap;
}

.meta__author {
  color: #4a5568;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
}

.meta__author:hover {
  color: #4361ee;
  background-color: rgba(67, 97, 238, 0.05);
}

.meta__separator {
  width: 4rpx;
  height: 4rpx;
  background-color: #cbd5e0;
  border-radius: 50%;
}

.meta__comments, .meta__time {
  display: flex;
  align-items: center;
  gap: 8rpx;
  transition: color 0.3s ease;
}

.news-card:hover .meta__comments,
.news-card:hover .meta__time {
  color: #4a5568;
}

.meta-icon {
  font-size: 20rpx;
  opacity: 0.8;
}

/* 搜索插槽-终极高级设计 */
.search-slot {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f5f6ff 0%, #edf2ff 100%);
  padding: 8rpx 18rpx;
  border-radius: 22rpx;
  border-left: 5rpx solid #4361ee;
  box-shadow: 0 4rpx 12rpx rgba(67, 97, 238, 0.08);
  transition: all 0.3s ease;
}

.news-card:hover .search-slot {
  background: linear-gradient(135deg, #f0f4ff 0%, #e6edff 100%);
  box-shadow: 0 6rpx 16rpx rgba(67, 97, 238, 0.12);
}

.search-slot__label {
  font-size: 20rpx;
  color: #4a5568;
  margin-right: 12rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.search-slot__tags {
  display: flex;
  gap: 12rpx;
}

/* 搜索标签-顶级质感 */
.search-tag {
  padding: 6rpx 18rpx;
  background: linear-gradient(180deg, #ffffff, #f8f9fa);
  border: 1rpx solid #e0e7ff;
  border-radius: 20rpx;
  color: #4361ee;
  font-size: 20rpx;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4rpx 8rpx rgba(67, 97, 238, 0.06);
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.search-tag:hover {
  background: linear-gradient(180deg, #f0f4ff, #e6edff);
  border-color: #4361ee;
  transform: scale(1.08);
  box-shadow: 0 6rpx 12rpx rgba(67, 97, 238, 0.15);
}

.search-tag:active {
  transform: scale(0.96);
  box-shadow: 0 2rpx 6rpx rgba(67, 97, 238, 0.1);
}

.tag-icon--small {
  font-size: 18rpx;
}

/* 底部装饰 */
.page-footer {
  height: 20rpx;
  margin-top: 20rpx;
}

/* 动画效果 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 深色模式-终极适配 */
@media (prefers-color-scheme: dark) {
  .page-container {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  }
  
  .page-container::before {
    background-image: radial-gradient(rgba(105, 177, 255, 0.05) 1px, transparent 1px);
  }
  
  .top-nav {
    background: linear-gradient(90deg, #16213e 0%, #0f3460 100%);
    box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.3);
  }
  
  .news-card {
    background: #1e293b;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
    border: 1rpx solid rgba(75, 85, 99, 0.3);
  }
  
  .news-card--top {
    border: 1rpx solid rgba(229, 62, 62, 0.2);
  }
  
  .news-card:hover {
    box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.25);
  }
  
  .card-texture {
    background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  }
  
  .news-card__title {
    background: linear-gradient(90deg, #f8fafc, #e2e8f0);
    -webkit-background-clip: text;
    background-clip: text;
  }
  
  .news-card:hover .news-card__title {
    background: linear-gradient(90deg, #94a3b8, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
  }
  
  .news-card__meta, .meta__time {
    color: #94a3b8;
  }
  
  .meta__author {
    color: #cbd5e1;
  }
  
  .meta__author:hover {
    color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.1);
  }
  
  .meta__separator {
    background-color: #475569;
  }
  
  .news-card:hover .meta__comments,
  .news-card:hover .meta__time {
    color: #cbd5e1;
  }
  
  .search-slot {
    background: linear-gradient(135deg, #27374d 0%, #334155 100%);
    border-left-color: #60a5fa;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }
  
  .news-card:hover .search-slot {
    background: linear-gradient(135deg, #2d3748 0%, #34495e 100%);
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
  }
  
  .search-slot__label {
    color: #e2e8f0;
  }
  
  .search-tag {
    background: linear-gradient(180deg, #334155 0%, #27374d 100%);
    border-color: #475569;
    color: #60a5fa;
    box-shadow: none;
  }
  
  .search-tag:hover {
    background: linear-gradient(180deg, #34495e 0%, #2d3748 100%);
    border-color: #60a5fa;
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}

/* 响应式优化（小屏幕适配） */
@media (max-width: 375px) {
  .news-card {
    padding: 24rpx;
  }
  
  .news-card__title {
    font-size: 30rpx;
  }
  
  .news-card__meta {
    font-size: 20rpx;
  }
  
  .search-tag {
    padding: 4rpx 14rpx;
    font-size: 18rpx;
  }
}
</style>